<template>
  <div>
    <h3>账号列表</h3>
    <hr />
    <el-table :data="userinfo" height="600" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="账号" prop="account"></el-table-column>
      <el-table-column label="用户组" prop="userGroup"></el-table-column>
      <el-table-column label="创建时间" prop="ctime"></el-table-column>
      <el-table-column label="操作">
        <!-- slot-scope: 接收每一行的动态数据,形参.row当前行的具体数据  形参.$index当前行的索引 -->
        <template slot-scope="scope">
          <el-button @click="changuser(socpe)">编辑</el-button>

          <el-button size="mini" type="danger" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 
        @size-change: 每页显示的条数发生变化，需要给一个methods，有形参（新的条数）
        @current-change: 点击了新的页数，需要给一个methods，有形参（新的页数）
        current-page: 当前分页组件的页数，默认为1
        page-sizes: 可以切换的条数数组 例：[5,10,15,20]
        page-size: 当前默认显示的条数  例：5 （默认取数组的第一个）
        total: 数据库数据总条数
        layout: 控制分页每个部件在页面的显示顺序（可以删除某一个，也可以交换位置）
       -->
    <el-pagination
      @size-change="sizechange"
      @current-change="changepage"
      :current-page="currentPage"
      :page-sizes="sizearr"
      :page-size="curpage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tatal"
    >
    </el-pagination>
    <el-button type="danger" @click="alldel" class="alldel">批量删除</el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <h4>修改用户信息</h4>
      <div class="changebox">
        <p>
          <span>用户名：</span>
          <el-input v-model="newname"></el-input>
        </p>
        <p>
          <span>用户组：</span><br />
          <el-select
            v-model="newgroup"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>

        <el-button type="success" @click="changeuserbtn" style="width: 100%"
          >确认修改</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { deluser, listuser,alluser,edituser } from "@/apis/users";
export default {
  data() {
    return {
      currentPage: 1,
      userinfo: [],
      tatal: 0,
      sizearr: [4, 8, 12, 16],
      curpage: 8,
      drawer: false,
      newname: "",
      newgroup: "",
      userid: "",
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        },
      ],
      group: "普通管理员",
    
    };
  },
  created() {
    this.getalluserinfo();
  },
  methods: {
    getalluserinfo() {
      listuser({ currentPage: this.currentPage, pageSize: this.curpage }).then(
        (res) => {
          for (const v of res.data.data) {
            let date = new Date(v.ctime);
            v.ctime =
              date.getFullYear() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getDate();
          }
          this.userinfo = res.data.data;
          this.tatal = res.data.tatal;
        }
      );
    },
    handleDelete(val) {
      console.log(val.row.id);

      deluser({ id: val.row.id }).then((res) => {
        console.log(res);
        this.getalluserinfo();
      });
    },
    sizechange(newsize) {
      this.currentPage=newsize;
      this.getalluserinfo();
    },

    changepage(newpage) {
      this.curpage=newpage;
      this.getalluserinfo()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

  //编辑用户
    changuser(val) {
      this.drawer = true;
      this.userid = val.row.id;
      this.newname = val.row.account;
      this.newgroup = val.row.userGroup;
    },
    // 编辑单个用户2，将值提交发送ajax
    changeuserbtn() {
      edituser({
        id: this.userid,
        account: this.newname,
        userGroup: this.newgroup,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "修改用户成功",
            type: "success",
          });
        } else {
          this.$message.error("修改用户失败");
        }
      });
    },

  //批量删除
    alldel() {

      let delarr = this.multipleSelection.map((v) => {
        return v.id;
      });
      // 将数组转换为字符串
      alluser({ ids: JSON.stringify(delarr) }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，批量删除成功",
            type: "success",
          });
          this.getalluserinfo();
        } else {
          this.$message.error("删除失败，请刷新网页重试");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldel {
  margin-top: 10px;
}
</style>